/**
 * @description: 多关键词搜索弹框
 * @author: fj
 */

import { Form, Input, message } from 'antd';
import CommonModal from '@/components/CommonModal';
import { union } from 'lodash';

const BatchKeyWods = ({ visible, handleCancel, handleOk }) => {
  const [form] = Form.useForm();

  const batchSearchOk = () => {
    form.validateFields().then((val) => {
      const { keyWords } = val;
      //通过换行或者逗号分隔并过滤掉空的
      const arr = keyWords.split(/\n|,|，/gi).filter(item => item.replace(/ /g, ''));
      if (arr.length > 4) {
        message.warning('最多查询4条信息');
        return;
      }
     
      const item = union(arr).join(',');
      handleOk(item);
      form.resetFields();
    });
  };

  return (
    <CommonModal
      title="多关键词搜索"
      visible={visible}
      onOk={batchSearchOk}
      onCancel={handleCancel}
    >
      <div
        style={{
          margin: '6px 0px 15px 0px',
          backgroundColor: '#EBF4FF',
          padding: '5px 18px 5px 18px',
          borderRadius: '2px',
        }}
      >
        <div
          style={{
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'space-around',
          }}
        >
          1.
          <div>
            分行输入内容，提交后主页面输入框会按照逗号自动隔开，点击查询可进行多关键词查询商品
          </div>
        </div>
        <div style={{ marginTop: 5 }}>
          2. 注释: 每行输入1个内容，最多4个，例如:
          <div className="flex-column" style={{ marginLeft: 18 }}>
            <span>2021年</span>
            <span>春秋</span>
            <span>四件套</span>
          </div>
        </div>
      </div>
      <Form form={form}>
        <Form.Item
          label="商品关键词"
          name="keyWords"
          rules={[
            {
              required: true,
              message: '请输入商品关键词',
            },
          ]}
        >
          <Input.TextArea placeholder="请输入" style={{ height: 286 }} />
        </Form.Item>
      </Form>
    </CommonModal>
  );
};

export default BatchKeyWods;
